<template>
    <div class="common-echart-box">
      <div class="common-echart" :id="id"></div>
    </div>
    
  </template>
  <script setup>
  import * as echarts from "echarts";
  import {onMounted, onUnmounted, watch} from "vue";
  //传入参数
  const props=defineProps({
    loading:{
      type:Boolean,
      default:false
    },
    id:{
      type: String,
      default:''
    },
    title:{
      type: String,
      default:''
    },
    titleObj:{
      type: Object,
      default:null
    },
    grid:{
      type: Object,
      default:null
    },
    tooltip:{
      type: Object,
      default:null
    },
    xAxis:{
      type: Object,
      default:null
    },
    yAxis:{
      type: Object,
      default:null
    },
    xData:{
      type:Array,
      default:()=>{
        return []
      }
    },
    type:{
      type:String,
      default:"line"
    },
    series:{
      type:Array,
      default:null
    },
    dataset:{
      type:Object,
      default:null
    }
  })
  let myEchart = null
  //折线图-柱状图
  let chartOptionsLine={
    title: {
      text: '',
      left: "center",
    },
    xAxis: {
      type: "category",
      data: []
    },
    tooltip: {
      trigger: "axis"
    },
    yAxis: {
      type: "value"
    },
    series: [],
  }
  //饼图
  let chartOptionsPie={
    title: {
      text: '',
      left: "center",
    },
    tooltip: {
      trigger: 'item'
    },
    series:[]
  }
  //散点图
  let chartOptionsScatter={
    title: {
      text: '',
      left: "center",
    },
    tooltip: {
      formatter: '({c})'
    },
    xAxis:{},
    yAxis:{},
    series:[]
  }
  onMounted(()=>{
    if(!props.id){
      this.$message.error('请传入echarts元素ID')
      return
    }
    let chartDom=document.getElementById(props.id)
    if(!myEchart){
      //(dom,theme)  purple-passion：主题
      myEchart=echarts.init(chartDom)
    }
    setOptions()
    //resize监听
    window.addEventListener('resize', resizeChange)
  })
  onUnmounted(() => {
    //图表销毁
    echarts.dispose;
    //注销监听
    window.removeEventListener('resize', resizeChange)
  });
  //图表数据填充
  const setOptions=()=>{
    //折线图-柱状图
    if(props.type=='line'||props.type=='bar'&&props.series){
      if(props.titleObj){
        chartOptionsLine.title=props.titleObj
      }else{
        chartOptionsLine.title.text=props.title||''
      }
      if(props.tooltip){
        chartOptionsLine.tooltip=props.tooltip
      }
      if(props.grid){
        chartOptionsLine.grid=props.grid
      }
      if(props.xAxis){
        chartOptionsLine.xAxis=props.xAxis
      }
      else{
        chartOptionsLine.xAxis.data=props.xData
      }
      if(props.yAxis){
        chartOptionsLine.yAxis=props.yAxis
      }
      if(props.dataset){
        chartOptionsLine.dataset=props.dataset
      }
      chartOptionsLine.series=props.series
      myEchart.setOption(chartOptionsLine)
    }
    //饼图
    else if(props.type=='pie'&&props.series){
      if(props.titleObj){
        chartOptionsPie.title=props.titleObj
      }else{
        chartOptionsPie.title.text=props.title||''
      }
      if(props.grid){
        chartOptionsPie.grid=props.grid
      }
      if(props.tooltip){
        chartOptionsPie.tooltip=props.tooltip
      }
      if(props.dataset){
        chartOptionsPie.dataset=props.dataset
      }
      chartOptionsPie.series=props.series
      myEchart.setOption(chartOptionsPie)
    }
    //散点图
    else if(props.type=='scatter'&&props.series){
      if(props.titleObj){
        chartOptionsScatter.title=props.titleObj
      }else{
        chartOptionsScatter.title.text=props.title||''
      }
      if(props.grid){
        chartOptionsScatter.grid=props.grid
      }
      if(props.tooltip){
        chartOptionsScatter.tooltip=props.tooltip
      }
      if(props.dataset){
        chartOptionsScatter.dataset=props.dataset
      }
      chartOptionsScatter.series=props.series
      myEchart.setOption(chartOptionsScatter)
    }
  }
  const resizeChange=()=>{
    myEchart.resize()
  }
  watch(()=>props.series,(newValue, oldValue)=>{
    setOptions()
  })
  watch(()=>props.dataset,(newValue, oldValue)=>{
    setOptions()
  })
  </script>
  <style scoped>
  .common-echart-box{
    width:500px;
    height:500px;
  }
  .common-echart{
    width:100%;
    height:100%;
  }
  </style>